<script>
    var baseUrl = "<?php echo $baseUrl; ?>?t=1";
</script>

<div class="layui-row search-row" id="search-box">
    <?php if(!empty($carModels)){ ?>
    <div class="item">
        <div class="row" style="width: 330px">
            <div class="box">
                <span class="title">车型：</span>
                <div  data-key="models_id" data-type="select" class="txt search-key" >
                    <select name="all" lay-filter="models_id" class="select">
                        <option value="">请选择</option>
                        <?php foreach ($carModels as $key => $value) { ?>
                        <option value="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
    <div class="item">
        <div class="row" style="width: 360px;">
            <div class="box">
                <span class="title">关键字查询：</span>
                <div data-key="key" data-type="txt" class="search-key txt">
                    <input type="text" value="" placeholder="车牌号/司机名称"/>
                </div>
            </div>
        </div>
        <div class="row" style="width: 460px;">
            <div class="btn">
                <button class="layui-btn layui-btn-sm btn-query">查询</button>

                <?php if(Cm::$app->limitGet('/platform/car/model')){ ?>
                    <a href="<?php echo \yii\helpers\Url::to(['car/model'])?>" class="layui-btn layui-btn-normal layui-btn-sm">车型管理</a>
                <?php } ?>

                <?php if(Cm::$app->limitPost('/platform/car/index','save')){ ?>
                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary layui-btn-sm" onclick="app.edit.add()">+ 新增车辆</a>
                <?php } ?>
            </div>
        </div>
    </div>
</div>
<table data-url="<?php echo $baseUrl; ?>?action=list"
       data-search="#search-box"
       data-page=""
       data-height="full-270"
       id="data-list"
       lay-filter='data-list' style="display: none;">
    <thead>
    <tr>
        <th width="110" field="id">ID</th>
        <th width="110" align="center" field="plate">车牌号</th>
        <th width="130" field="driver">司机</th>
        <th width="130" align="center" field="telephone">联系电话</th>
        <th width="110" field="name">车型</th>
        <th width="110" field="c_seat">核定座位</th>
        <th width="110" field="p_seat">乘客座位</th>
        <th minWidth="160" toolbar="#tpl-cmd">操作</th>
    </tr>
    </thead>
</table>

<script type="text/html" id="tpl-cmd">
    <?php if(Cm::$app->limitPost('/platform/car/index','info')){ ?>
        <button onclick="app.edit.update(this)" class="layui-btn layui-btn-xs">编辑</button>
    <?php } ?>
    <?php if(Cm::$app->limitPost('/platform/car/index','del')){ ?>
        <button onclick="app.del({{d.id}})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
    <?php } ?>    
    <span style="display: none;">{{JSON.stringify(d)}}</span>
</script>

<script type="text/html" id="tpl-edit">
    <div class="layui-card" style="box-shadow: none;">
        <div class="layui-card-header">{{id>0?'编辑车辆':'新增车辆'}}</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">车牌号</label>
                    <div class="layui-input-block">
                        <input type="text" name="plate" value="{{plate}}" lay-verify="required|plate"  autocomplete="off" placeholder="请输入车牌号" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">车型</label>
                    <div class="layui-input-block">
                        <select lay-filter="models_id" lay-search id="models_id">
                            <option value="">请选择</option>
                            <?php foreach ($carModels as $key => $value) { ?>
                                <option value="<?php echo $value['id'] ?>"><?php echo $value['name']; ?></option>
                            <?php } ?>
                        </select>  
                    </div>
                </div>   

                <div class="layui-form-item">
                    <label class="layui-form-label">核定座位</label>
                    <div class="layui-input-block">
                        <input type="text" name="c_seat" id="c_seat" value="{{c_seat}}" lay-verify="required|intnumber" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">乘客座位</label>
                    <div class="layui-input-block">
                        <input type="text" name="p_seat" id="p_seat" value="{{p_seat}}" lay-verify="required|intnumber" autocomplete="off" class="layui-input">
                    </div>
                </div> 

                <div class="layui-form-item">
                    <label class="layui-form-label">司机姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="driver" value="{{driver}}" lay-verify="required"  autocomplete="off" placeholder="请输入司机姓名" class="layui-input">
                    </div>
                </div>   

                <div class="layui-form-item">
                    <label class="layui-form-label">司机电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="telephone" value="{{telephone}}" autocomplete="off" placeholder="请输入司机联系电话" class="layui-input">
                    </div>
                </div>     

                <?php if(Cm::$app->limitPost('/platform/car/index','save')){ ?>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
                    </div>
                </div>
                <?php } ?>
            </form>
        </div>
    </div>
</script>

<script>
    var app = {
        carModels:'<?php echo json_encode($carModels); ?>',
        init: function () {
            $('#data-list').table();
            this.form.init();
        },
        form: {
            obj: null,
            init: function () {
                var _this = this;
                layui.use('form', function () {
                    var form = layui.form;
                    _this.obj = form;
                    form.verify({
                        intnumber: [
                            /^([1-9]|[1-9]\d+)$/
                            , '请填写大于0的整数！'
                        ],
                        plate:[
                            /^([\u4e00-\u9fa5]{1}[a-zA-Z]{1}[a-zA-Z_0-9]{4}[a-zA-Z_0-9_\u4e00-\u9fa5]|[W]{1}[A-Z]{1}[\u4E00-\u9FA5]{1}[0-9]{4}[0-9A-Z]{1}|[\u4e00-\u9fa5]{1}[a-zA-Z]{1}[DF]{1}[a-zA-Z_0-9]{1}[0-9]{4}|[\u4e00-\u9fa5]{1}[a-zA-Z]{1}[0-9]{5}[DF]{1}|[a-zA-Z]{2}[0-9]{5}|[\u4e00-\u9fa5]{1}[a-zA-Z]{1}[DF]{1}[a-zA-Z_0-9]{5})$/
                            , '请填写正确的车牌'
                        ]
                    });
                });
            },
            on: function () {
                var _this = this;
                 
                this.obj.on('select(models_id)', function (data) {
                    app.edit.data.models_id = data.value;
                    var json= eval('('+app.carModels+')');
                    $.each(json,function(index,value){
                        if(value.id == data.value){
                            $("#c_seat").val(value.c_seat);
                            $("#p_seat").val(value.p_seat);
                        }
                    });
                });

                this.obj.on('submit(*)', function (data) {
                    if(app.edit.data.models_id==0){
                        layer.msg("请选择车型!", {icon: 5});
                        return false;
                    }

                    if(data.field.c_seat<data.field.p_seat){
                        layer.msg("乘客座位数只能小于等于核定座位数!", {icon: 5});
                        return false;
                    }
                    app.edit.data.plate = data.field.plate;
                    app.edit.data.driver = data.field.driver;
                    app.edit.data.telephone = data.field.telephone;
                    app.edit.data.c_seat = data.field.c_seat;
                    app.edit.data.p_seat = data.field.p_seat;
                    app.save();
                    return false;
                });
            },
            render: function (select) {
                this.obj.render(select);
                this.on();
            }
        },
        edit:{
            data:null,
            load:function(){
                layer.open({
                    title:false,
                    area:['430px','550px'],
                    type:1,
                    content:template('tpl-edit', this.data)
                });
                if(app.edit.data.models_id != 0){
                    $("#models_id").val(app.edit.data.models_id);
                }
                app.form.render();
            },
            check:function(){
                var json= eval('('+app.carModels+')');
                if(json.length == 0){
                    layer.msg("请先添加车型");
                    return false;
                }
            },
            add:function(){
                app.edit.check();
                this.data={
                    id:0,
                    plate:'',
                    driver:'',
                    telephone:'',
                    models_id:0,
                    c_seat:0,
                    p_seat:0
                };
                this.load();
            },
            update:function(e){
                app.edit.check();
                var str=$(e).parent().find('span').html();
                var json=eval('('+str+')');
                this.data={
                    id:json.id,
                    plate:json.plate,
                    driver:json.driver,
                    telephone:json.telephone,
                    models_id:json.models_id,
                    c_seat:json.c_seat,
                    p_seat:json.p_seat,
                };
                this.load();
            }    
        },
        save:function () {
            $.post(baseUrl+'&action=save',this.edit.data,function (d) {
                if(d.flag)
                {
                    layer.closeAll();
                    layer.msg(d.msg);
                    $('#data-list').table();
                }else{
                    layer.msg(d.msg);
                }
            },'json')
        },
        del:function (id) {
            layer.msg("确定删除该车辆吗？", {
                time: false, //20s后自动关闭
                btn: ['确定', '取消'],
                yes:function () {
                    $.post(baseUrl+'&action=del',{id:id},function (d) {
                        layer.closeAll();
                        if(d.flag)
                        {
                            layer.msg('删除成功');
                            $('#data-list').table();
                        }else{
                            layer.msg(d.msg);
                        }
                    },'json')
                }
            });
        }
    };

    app.init();
</script>